<template>
  <div class="right-container">
    <!-- <h3>Right 组件 --- 是否全选: {{ isAll }}</h3> -->
    <!-- getters 就是计算属性, 所以不需要加括号调用 -->
    <!-- <h3>Right 组件 --- 是否全选: {{ $store.getters.isAll }}</h3> -->
    <h3>Right 组件 --- 是否全选: {{ isAll }}</h3>
    <hr />

    <!-- <p>count 值：{{ $store.state.count }}</p> -->
    <p>count 值:{{ count }}</p>
    <!-- <button @click="btn" class="btn btn-warning">-1</button> -->
    <button @click="add({ num: -5 })" class="btn btn-warning">-5</button>
    <!-- <button @click="$store.dispatch('subAsync', { num: -7 })" class="btn btn-warning">异步-5</button> -->
    <button @click="subAsync({ num: -10 })" class="btn btn-warning">
      异步-5
    </button>
  </div>
</template>

<script>
// 1. 按需导入 mapMutations, mapActions, mapGetters

import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
export default {
  name: "Right",
  computed: {
    ...mapState(["count"]),

    ...mapGetters(["isAll"]),
  },
  methods: {
    // 2. 在 methods 中调用 mapMutations 传入要映射的 mutation 函数, 将结果用 ... 展开运算符展开

    ...mapMutations(["add", "sub"]),

    ...mapActions(["subAsync"]),
  },
};
</script>

<style>
</style>
